<template>
	<view class="popup-container">
		<uni-popup ref="share_popup" type="bottom" background-color="#fff" class="popup-content"
			@maskClick="handleMaskClick">
			<view class="popup-top-bar flex-between">
				<view class="flex-column-center">
					<uni-icons class="prospect-icon" type="redo" size="25" color="#333"></uni-icons>
					<text>分享</text>
				</view>
				<view class="flex-column-center pop-top-bar-report">
					<uni-icons class="prospect-icon" type="info" size="25" color="#333"></uni-icons>
					<text>举报</text>
				</view>
				<view class="flex-column-center">
					<uni-icons class="prospect-icon" type="info" size="25" color="#333"></uni-icons>
					<text>生成二维码</text>
				</view>
			</view>
			<view class="popup-bottom-bar" @click="handleClosePopup">
				取消
			</view>
		</uni-popup>

		<uni-popup ref="comment_popup" type="bottom" background-color="#fff" class="popup-content"
			@maskClick="handleMaskClick">
			<view class="popup-title">
				<text>0条评论</text>
				<uni-icons class="popup-title-icon" type="closeempty" size="25" color="#333" @click="handleClosePopup">
				</uni-icons>
			</view>
			<view class="popup-main">
				暂无数据
			</view>
			<view class="popup-footer flex-center">
				<input type="text" name="" id="" placeholder="请发表您的评论"
					placeholder-style="color: #808080; font-z-size: 10rpx; text-align:left;" class="popup-input-text">
				<!-- <input type="button" value="评论" class="popup-input-btn"> -->
				<text class="popup-input-btn">评论</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.$bus.$on('controlPopup', this.controlPopup)
		},
		methods: {
			// 点击遮罩层触发
			handleMaskClick() {
				// this.$bus.$emit('changeShowTabBar', true)
			},
			// 弹窗的取消按钮
			handleClosePopup() {
				// this.$bus.$emit('changeShowTabBar', true)
				this.$refs.share_popup.close()
				this.$refs.comment_popup.close()
			},
			controlPopup(data) {
				if (data == 'share_popup') {
					this.$refs.share_popup.open('bottom')
				} else if (data == 'comment_popup') {
					this.$refs.comment_popup.open('bottom')
				}
			}
		}
	}
</script>

<style lang="scss">
	.popup-container {
		// 弹窗优先于tabBar
		position: fixed;
		bottom: 0;
		left: 0;
		color: #333;
		text-align: center;

		.popup-content {
			.popup-top-bar {
				padding: 40rpx 70rpx;
				border-bottom: 1px solid #e7e7e7;

				.pop-top-bar-report {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			.popup-bottom-bar {
				padding: 40rpx 0;
			}
		}

		.popup-content {
			font-size: 28rpx;

			.popup-title {
				position: relative;
				padding: 20rpx;

				.popup-title-icon {
					position: absolute;
					right: 20rpx;
					display: inline-block;
				}
			}

			.popup-main {
				height: 500rpx;
				line-height: 500rpx;
			}

			.popup-footer {
				padding: 20rpx 40rpx;
				background-color: #f1f1f1;

				.popup-input-text {
					flex-grow: 1;
					outline: none;
					background-color: #fff;
					padding: 5rpx 30rpx;
					margin-right: 20rpx;
					text-align: left;
				}

				.popup-input-btn {
					background-color: #034462;
					color: #fff;
					padding: 7rpx 20rpx 10rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>